<!--
 * Copyright 2009, Google Inc.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebGL Aquarium</title>
<style>
html, body {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0px;
  margin: 0px;
  font-family: sans-serif;
  background: url(aquarium-cp-background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.keyword { color: #8AF; }
#contentOuter {width: 100%; height: 100%; overflow: hidden; position: relative;}
#contentOuter {display: table; position: static;}
#contentMiddle {display: table-cell; vertical-align: middle; width: 100%;}

#contentInner {
  width: 80%;
  padding: 20px;
  margin: auto;
  background-color: rgba(0,0,0,0.5);
  border-radius: 30px;
}
#buttons {
  padding: 30px;
  text-align: center;
  font-size: xx-large;
}
.ui-button {
  margin-left: 40px;
  margin-right: 40px;
}
#uiOuter {
  margin: auto;
}
#uiContainer {
  color: white;
  font-size: xx-large;
  border-radius: 10px;
  padding: 10px;
}
#ui {
}
#msgContainer {
  color: white;
  background-color: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 20px;
  font-size: xx-large;
  font-family: sans-serif;
  text-align: center;
}
#msgInner {
  text-align: left;
  margin: auto;
}
.clickable {
  cursor: pointer;
}
</style>
<link type="text/css" href="../jquery-ui-1.8.2.custom/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
<!-- Note: Socket IO is served from the socket io based server -->
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../tdl/base.js"></script>
<script type="text/javascript" src="aquarium-common.js"></script>
<script type="text/javascript" src="aquarium-control-panel.js"></script>
</head>
<body>
<div id="contentOuter">
<div id="contentMiddle">
<div id="contentInner">
<div id="msgContainer">
<div id="msgInner">
<div>These 9 displays are each running <span class="keyword">Google Chrome</span>.</div>
<div>The Aquarium is written in 100% <span class="keyword">HTML5</span>, <span class="keyword">JavaScript</span> and <span class="keyword">WebGL</span>.</div>
<div>The machines are kept in sync using <span class="keyword">WebSockets</span> and a server</div>
<div>also written in <span class="keyword">JavaScript</span> in <span class="keyword">node.js</span> using <span class="keyword">socket.io</span>.</div>
</div>
</div>
<div id="buttons">
<div id="reset">Reset</div>
<div id="changeView">Change View</div>
<div id="lasers">Lasers</div>
<div id="fish250">250 Fish</div>
<div id="fish1000">1000 Fish</div>
</div>
<div id="uiOuter">
<div id="uiContainer">
<div id="ui"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


